<!-- 每日精选商品区域 -->
<script setup>
	import { onMounted, ref } from 'vue';

	const proApi = uniCloud.importObject('product')
	const proData = ref([])

	const proHotListGet = async () => {
		const res = await proApi.getList()
		console.log('推荐商品', res)
		proData.value = res.data
	}

	// 跳转到详情页
	const goDetail = (item) => {
		uni.navigateTo({
			url: `/pages/productDetail/productDetail?id=${item._id}`
		})
	}

	onMounted(() => {
		proHotListGet()
	})
</script>

<template>
	<view class="productList">
		<slot></slot>
		<!-- 商品卡片区域 -->
		<view class="proList">
			<view @tap="goDetail(item)" class="proCard" v-for="item in proData" :key="item._id">
				<image class="proPic" :src="item.cover_pic" mode="aspectFill"></image>
				<!-- 内容文本区域 -->
				<view class="proText">
					<view class="proName">{{ item.name }}</view>
					<view class="price-info">
						<text class="price">￥{{ item.buy_price?.toFixed(2) }}</text>
						<text class="original">￥{{ item.original_price?.toFixed(2) }}</text>
					</view>
					<view class="bottom-box">
						<text class="discount">{{ item.discount }}折</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.productList {
		.proList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.proCard {
				position: relative;
				margin-top: 30rpx;
				width: 330rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.proPic {
					width: 100%;
					height: 248rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				.proText {
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					gap: 16rpx;

					.proName {
						@include textShenglue(2);
						font-size: 28rpx;
						font-weight: 700;
						line-height: 1.4;
					}

					.price-info {
						.price {
							color: $brand-ts-color;
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 12rpx;
						}

						.original {
							color: $text-font-color-3;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}

					.bottom-box {
						.discount {
							color: $brand-ts-color;
							font-size: 24rpx;
							background-color: #fff1f0;
							padding: 4rpx 12rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
	}
</style>